<template>
	<view class="card">
		<view class="card-1">
			<u-line-progress class="cae" active-color="#2979ff" :percent="ratio"></u-line-progress>
			<view class="wz-1" :class="{wz:ratio==50}">
				<text>完成实名认证</text>
			</view>
			<view class="wz-1" :class="{wz:ratio==100}">
				完成影像认证
			</view>
		</view>
		<template v-if="ratio==50">

			<view class="card-2">
				<view class="cad">
					<view class="inp">
						<view class="inp-wz">姓名</view><input class="inp-1" type="text" v-model="nameval"
							placeholder="请输入真实姓名" />
					</view>
					<view class="inp">
						<view class="inp-wz">身份证号</view><input class="inp-1" type="text" v-model="hmval"
							placeholder="请输入你的身份证号" />
					</view>

				</view>
				<view class="cad-1">
					<view class="wz-1">
						<text>为了保障你的账户安全,避免身份信息被盗用,借款前请先完成实名认证,我们承诺您的信息安全</text>
					</view>
					<u-top-tips ref="uTips"></u-top-tips>
					<button class="button" type="default" @click="alter(nameval,hmval)">下一步</button>
				</view>
			</view>
		</template>

		<!-- 身份证 -->
		<template v-else>
			<u-toast ref="uToast" />
			<view class="upim">
				<view class="up-im">
					<view class="itme" @tap="updatePIC">

						上传身份证正面
					</view>
					<image class="im-2" @tap="updatePIC" v-if="flang==true" :src="imgArr[0]" mode=""></image>
				</view>
				<view class="up-im">
					<view class="itme" @tap="updatePICone">
						上传身份证背面
					</view>
					<image class="im-2" @tap="updatePICone" v-if="keep==true" :src="imgArr1[0]" mode=""></image>
				</view>
				<view class="up-im-1">
					<button class="button" @tap="tuih" type="default">返回上一步</button>
					<button class="button" type="default" @click="boorm(nameval,hmval)" open-type="">完成</button>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapState
	} = createNamespacedHelpers(
		"user"
	);
	export default {
		data() {
			return {
				ratio: 50,
				imgArr: [],
				imgArr1: [],
				flang: false,
				keep: false,
				nameval: ``,
				hmval: ``
			}
		},
		computed: {
			...mapState([`card`])
		},
		methods: {

			...mapActions([`getresult`]),
			tuih() {
				this.nameval = ""
				this.hmval = ""
				this.ratio = 50
			},
			alter(name, namehm) {
				let na = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
				let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (name != "" && namehm != "") {
					if (reg.test(namehm) && na.test(name)) {
						
						this.ratio = 100
					} else {
						this.$refs.uTips.show({
							title: '信息错误请重填',
							type: 'error',
							duration: '2300'
						})
					}

				} else {
					this.$refs.uTips.show({
						title: '请将信息填写完整',
						type: 'error',
						duration: '2300'
					})
				}

			},
			updatePIC() {
				uni.chooseImage({
					count: 1, //限制图片上传数量，封顶9张
					success: (res) => { //拿到图片的返回数据
						console.log(res)
						this.imgArr = res.tempFilePaths
						this.flang = true

					}
				})
			},
			updatePICone() {
				uni.chooseImage({
					count: 1, //限制图片上传数量，封顶9张
					success: (res) => { //拿到图片的返回数据
						console.log(res)
						this.imgArr1 = res.tempFilePaths
						this.keep = true

					}
				})
			},
			async boorm(item, elem) {
				let id = uni.getStorageSync('id');
				let data = {
					"idCard": elem,
					"realName": item,
					"userId": id
				}
				await this.getresult(data)
				let card = this.card
				console.log(card)
				if (card.code == 200) {
					// console.log(card.data)
					this.$refs.uToast.show({
							title: card.data,
							type: 'success'
						}),
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)

				} else {
					console.log(`11`)
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	.card {

		width: 750rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.card-1 {
			width: 100%;
			height: 150rpx;
			display: flex;
			flex-wrap: wrap;

			.cae {
				width: 100%;
			}

			.wz-1 {
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				width: 50%;
				height: 30%;
				color: #bcc3cd;
			}

			.wz {
				color: #3775f6;
			}
		}

		.card-2 {
			width: 100%;
			height: 600rpx;

			.cad {
				width: 100%;
				height: 50%;
				padding: 40rpx;

				.inp {
					width: 100%;
					height: 50%;
					display: flex;
					border-bottom: 2px solid #dfe0e0;


					.inp-wz {
						text-align-last: justify;
						font-weight: 700;
						width: 25%;
						font-size: 32rpx;
						line-height: 110rpx;
						height: 100%;
					}

					.inp-1 {
						font-size: 32rpx;
						padding-left: 40rpx;
						width: 80%;
						height: 100%;

					}
				}
			}

			.cad-1 {
				width: 100%;
				height: 40%;
				padding: 0rpx 40rpx;

				.wz-1 {
					width: 100%;
					height: 50%;
					color: #c4cad3;
				}

				.button {
					width: 100%;
					height: 40%;
					font-size: 32rpx;
					font-weight: 800;
					color: #FFFFFF;
					background-color: #007AFF;
				}
			}
		}

		.card-3 {
			width: 100%;
			height: 200rpx;
			background-color: #18B566;
		}

		.upim {
			width: 100%;
			height: 800rpx;

			.up-im {
				position: relative;
				margin-top: 40rpx;
				width: 100%;
				height: 40%;


				// background-color: red;
				.itme {
					width: 100%;
					height: 100%;
					border-radius: 40rpx;
					// background-color: #4CD964;
					// border: dashed 4rpx #efefef;
					background: url(../../static/borrow/borrom-5.png)no-repeat;
					background-size: 100% 100%;
					text-align: center;
					font-size: 28rpx;
					line-height: 430rpx;
					color: #cbcbcb;
				}

				.im-2 {
					top: 0;
					border-radius: 40rpx;
					position: absolute;
					width: 100%;
					height: 320rpx;

				}

			}

			.up-im-1 {
				width: 100%;
				height: 20%;
				padding: 40rpx;

				.button {
					margin-top: 30rpx;
					width: 80%;
					height: 100%;
					color: #FFFFFF;
					background-color: #3775f6;
				}
			}
		}


	}
</style>
